<template>
    <div class="selectw">
        <!-- v-model 选择的数据 -->
        <el-select v-model="playCVal" class="m-2" @change="getValS" :placeholder="placeholder" 
        :size="large">
            <el-option v-for="item in playcList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { ref,watch } from 'vue'

let props:any = defineProps({  //defineProps接受到的数据是 只读的reactive
    large: {
        type: String,
        default: ''
    },
    placeholder:{
        type:String,
        default:'请选择'
    },
    playcList:{  //结构   ['全部','未开始','进行中','已结束']
        type:Array,
        default:[{label:'1',value:2}],

    }
})
const value = ref('')

// ui组件库需要的数据结构 =》 和后端给的数据很有可能是不一样的 => 需要自己用js处理   数组，对象方法，循环，递归
// 后端给的数据不是我想要的需要处理  =》这里 在子组件中处理 
// ( 拿到父组件给子组件传的异步数据，需通过 对它进行处理 watch监听两种数据，是ref直接写数据，是reactive需写方法 ）

let playCVal = ref('')
const getValS=(val:any)=>{
    console.log(val,999);    
}
 
</script>

<style scoped lang="scss">
.selectw {
    margin-left: 10px;
    // width: 50px;
}
</style>